<template>
    <div>
        <headNav title="提现记录" :isHome="false" :isBack="true"></headNav>
        <div class="tableCont">
            <div class="feedList" v-loadmore="loadmore">
                <ul>
                    <li v-for="(item,index) of list" :key="index">
                        <div class="yaoName">申请日期：{{item.applyTime}}</div>
                        <div class="yaoNum">申请金额：{{item.settleMoney}}元 </div>
                        <div class="yaoNum">结算时间：{{item.settleTime}}</div>
                        <div class="yaoNum">备注：{{item.remarks}}</div>
                        <img class="jiesuan" v-if="item.settleStatus == 2" src="@/assets/img/infomation/type-1.png" alt="">
                        <img class="jiesuan" v-if="item.settleStatus == 1" src="@/assets/img/infomation/type-2.png" alt="">
                        <img class="jiesuan" v-if="item.settleStatus == 0" src="@/assets/img/infomation/type-3.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="load-p">
                <van-loading v-if="isMore" size="24px" vertical>加载中...</van-loading>
                <van-loading v-else  size="0px" vertical class="loading">没有更多</van-loading>
            </div>
        </div>
        
        <!-- <div v-if="list.length == 0" class="nodata">
            暂无数据
        </div> -->
        <bottomNav :index="5"></bottomNav>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
export default {
    name: 'record',
    components: {
        headNav,
        bottomNav
    },
    data () {
        return{
            list: [],
            pageIndex:0,
            pageSize:5,
            isMore:true
        }
    },
    mounted() {
        this.getRecord()
    },
    methods: {
        loadmore () {
            this.getRecord()
        },
        getRecord () {
            if(!this.isMore){
                return
            }
            this.pageIndex++
            var prams = {
                limit:this.pageSize,
                page:this.pageIndex,
                order:'',
                sidx:'desc'
            }
            this.$store.dispatch('info/CashRecord',prams).then(
                res => {
                    if (res.status == 200) {
                        if(res.data.records.length < this.pageSize){
                            this.isMore = false
                        }
                        this.list = this.list.concat(res.data.records) 
                    } else {
                        this.$toast(res.msg)
                        this.isMore = false
                    }      
                }
            )
        }
    }
}
</script>
<style scoped>
.tableCont{
    height: calc(100% - 0.88rem);
}
.feedList li{
  width: 6.42rem;

background: #FFFFFF;
box-shadow: 0rem 0.02rem 0.16rem 0rem rgba(0, 0, 0, 0.05);
border-radius: 0.15rem;
margin: 0 auto;
margin-top: 0.3rem;
padding:0 0 0.1rem 0.3rem;
overflow: hidden;
position: relative;
}
.yaoName{
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.36rem;
}
.yaoNum{
    font-size: 0.28rem;
    color: #666666;
    margin-top: 0.16rem;
}
.jiesuan{
    width: 1.10rem;
    height: 1.10rem;
    position: absolute;
    right: 0.32rem;
    top: 0.42rem;
}
.nodata{
    text-align: center;
    color: #999;
    padding-top: 1rem;
}
.load-p{
    padding: 1rem 0 0 0;
}
.noMore{
    text-align: center;
    color: #969799;
    font-size: 0.24rem;
}
</style>